<template>
    <div class="device-manager">
        <div class="type-top-box">
            <el-form size="small" :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="人员：">
                    <el-input v-model="formInline.key" placeholder="请输入关键字搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="initData()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table v-loading="thisLoading" :border="true" :data="tableData" size="small" height="68vh">
            <el-table-column align="center" label="AD账户" width="170">
                <template slot-scope="scope">
                <span class="ad-names">{{scope.row.ad}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="userNm" label="姓名"></el-table-column>
            <el-table-column align="center" prop="operator" label="运营商"></el-table-column>
            <el-table-column align="center" prop="model" label="手机型号"></el-table-column>
            <el-table-column align="center" prop="platform" label="操作系统"></el-table-column>
            <el-table-column align="center" prop="systemVer" label="手机系统版本"></el-table-column>
            <el-table-column align="center" prop="appVer" label="APP版本"></el-table-column>
            <el-table-column align="center" prop="deviceId" label="设备ID" width="270"></el-table-column>
            <el-table-column align="center" label="更新时间">
                <template slot-scope="scope">
                    <span>{{changeTimeValue(scope.row.updateTime)}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <span>
                        <el-switch
                            v-model="scope.row.status"
                            @change="chengeStateItem(scope.row)"
                            active-color="#13ce66"
                            inactive-color="#888282"
                            active-text="开"
                            inactive-text="关"
                            active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </span>
                </template>
            </el-table-column>
             <!-- <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-button 
                        type="text"
                        class="edig-text"
                        @click="openThisPop(scope.row)"
                    >删除设备</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <div class="page-total">
            <pagination-table
                :total="total"
                :currentPage="pageIndex"
                :pagesize="formInline.pageSize"
                @pageChange="pageChange"
                @sizeChange="sizeChange"
            ></pagination-table>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { alertMessage } from "@/config/myUtil";
import PaginationTable from "@/components/public/paginationTable";
import { Form, FormItem ,Table, TableColumn } from "element-ui";
import { getuserDeviceApi , upateuserDeviceData , deleteuserDeviceData} from "@/api/getData";
Vue.use(Form);
Vue.use(Table);
Vue.use(FormItem);
Vue.use(TableColumn);
export default {
    name:"deviceManager",
    components: {
        "pagination-table": PaginationTable
    },
    data(){
        return {
            formInline:{
                key:"",
                pageIndex:0,
                pageSize:20,
            },
            tableData:[],
            thisLoading:false,
            pageIndex:1,
            total:20,
        }
    },
    mounted(){
        this.initData();
    },
    methods:{
        async initData(param){
            try {
                if(!param){
                    this.formInline.pageIndex = 0;
                    this.pageIndex = 1;
                    this.total = 0;
                }
                this.thisLoading = true;
                let data = await getuserDeviceApi(this.formInline);
                this.tableData = data;
                this.thisLoading = false;
                if (data[0]) {
                    this.total = data[0].total;
                }else{
                    this.total = 0;
                }
            } catch (error) {                
                this.thisLoading = false;
                console.log(error)
            }   
        },
        async chengeStateItem(row){
            try {
                var item = JSON.parse(JSON.stringify(row));
                delete item.userNm;
                delete item.total;
                let data = await upateuserDeviceData(item);
                if(data == 1){
                    alertMessage("修改成功！");
                }
            } catch (error) {
                console.log(error)
            }
        },
        async deleteOneData(id){
            try {
                let data = await deleteuserDeviceData({deviceId:id});
                if(data == 1){
                    alertMessage("删除成功");
                    this.initData();
                }
            } catch (error) {
                console.log(error)
            }
        },
        // 分页
        pageChange(num) {
            this.formInline.pageIndex = num - 1;
            this.initData("set");
        },
        // 改变表格分页条数
        sizeChange(num) {
            this.formInline.pageSize = num;
            this.initData();
        },
        changeTimeValue(num){
            return num ? moment(num).format("YYYY-MM-DD HH:mm:ss") : "";
        },
        openThisPop(item){
            this.$confirm('此操作将删除该条信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteOneData(item.deviceId)
            }).catch(() => {});
        }
    }
}
</script>
<style lang="less" scoped>
.device-manager{
    padding: 10px;
    padding-top: 0px;
}
</style>